<template>
    <div class="w750">
        <div class="bg-fff">
            <van-tabs
                v-model="active"
                :swipe-threshold="5"
                :color="themes.color"
                :title-active-color="themes.color"
                @change="switchType"
                @disabled="selectTime"
                :offset-top="0"
                class="position-fixed top-0 w-100 bg-fff zindex-99"
            >
                <van-tab :title="item.name" v-for="(item, index) in navArr" :key="index" />
                <van-tab disabled>
                    <template slot="title">
                        <span class="iconfont iconcalendar" style="color: #000" />
                    </template>
                </van-tab>
            </van-tabs>
            <!--  -->
            <van-list
                v-if="paging.tab && !paging.emptylist && !partLoading"
                v-model="paging.loading"
                :finished="paging.finished"
                :finished-text="!paging.emptylist ? '没有更多了' : ''"
                @load="onLoad"
                :immediate-check="false"
                :error.sync="paging.error"
                error-text="请求失败，点击重新加载"
                style="margin-top: 44px"
            >
                <div class="font-14">
                    <div class="p-1 border-top-10bg" v-for="(good, index) in orderArr" :key="index">
                        <div class="flex-between">
                            <span>订单号：{{ good.subNumber }}</span>
                            <span :class="[good.distCommissionStatus == 10 ? 'text-333' : 'text-main']">
                                {{ good.distCommissionStatus == 10 ? '已完成' : '未结算' }}
                            </span>
                        </div>
                        <div class="flex-between mt-1">
                            <div class="d-flex a-center flex-1">
                                <div style="width: 20px; height: 20px" class="mr-1">
                                    <img src="@/assets/images/head-default.png" alt="" class="w-100 h-100 rounded-circle" />
                                </div>
                                <span class="line-clamp1" style="width: auto; max-width: 1.5rem">{{ good.nickName }}</span>
                            </div>
                            <span>下单时间：{{ good.subDate | dateformat }}</span>
                        </div>
                        <div class="mt-1">
                            <div class="d-flex mt-1" v-for="(goodItem, index) in good.appPromoteOrderItems" :key="index">
                                <div style="width: 80px; height: 80px;">
                                    <img :src="$imgUrlHead + goodItem.pic" alt="" class="w-100 h-100 rounded-5" />
                                </div>
                                <div class="d-flex flex-column j-sb ml-1 w-75">
                                    <span class="line-clamp1">{{ goodItem.prodName }}</span>
                                    <span class="text-999 font-12">数量：{{ goodItem.basketCount }}</span>
                                    <span>￥{{ Money(goodItem.price)[0] }}.{{ Money(goodItem.price)[1] }}</span>
                                    <p class="font-12">
                                        <span class="mr-1">佣金比例：{{ goodItem.commissionRate }}%</span>
                                        <span>
                                            佣金：
                                            <span class="text-main">
                                                ￥{{ Money(goodItem.distCommisAmount)[0] }}.{{ Money(goodItem.distCommisAmount)[1] }}
                                            </span>
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="mt-2 mb-1 text-right ">
                            <span class="mr-1 font-12">订单总额:￥{{ Money(good.actualTotal)[0] }}.{{ Money(good.actualTotal)[1] }}</span>
                            <span>
                                总获佣金：
                                <span class="font-weight">
                                    ￥{{ Money(good.totalDistCommissionAmount)[0] }}.{{ Money(good.totalDistCommissionAmount)[1] }}
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </van-list>
            <Noempty :pic="require('../../../assets/images/order-empty.png')" :title="'您没有相关订单'" v-if="paging.emptylist && !paging.error" />

            <!-- 局部加载组件 -->
            <part-loading v-model="partLoading" backgroundColor="#fff" height="400px" size="24px" :color="themes.color" />

            <!-- 时间 -->
            <van-calendar v-model="showCalendar" type="range" :min-date="minDate" @confirm="onConfirm" :color="themes.color">
                <template v-slot:title>
                    <div class="d-flex a-center px-1">
                        <span @click="clearTime" class="iconfont icondelete" style="font-size: 22px"></span>
                        <span class="flex-1">日期选择</span>
                    </div>
                </template>
            </van-calendar>
        </div>
    </div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty'
import PartLoading from '@/components/PartLoading/PartLoading'
import cash from 'utils/tool'
import { mapState } from 'vuex'
import { promoteOrder } from 'api/extensionApi'
import PageUtil from 'utils/PageUtil'
const pageUtil = new PageUtil(promoteOrder, {
    field: {
        list: 'orderArr'
    }
})
export default {
    components: { Noempty, PartLoading },
    data() {
        return {
            partLoading: true,
            Money: cash, //价格转换
            orderArr: [], // 数组
            active: 0, // 当前激活的tab
            paging: {
                tab: false,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            params: {
                status: '', // 状态
                startDate: '', // 开始时间
                endDate: '' // 结束时间
            },
            navArr: [
                {
                    name: ' 全部'
                },
                {
                    name: '未结算'
                },
                {
                    name: '已结算'
                }
            ],
            showCalendar: false, // 日历弹窗
            minDate: new Date(1930, 0, 1) // 最小时间
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    mounted() {
        pageUtil.loadListByPage(this, this.params, {
            success: () => {
                this.partLoading = false
            }
        })
    },
    methods: {
        // 切换tab
        switchType(switchNumber) {
            this.partLoading = true
            this.$set(this.paging, 'emptylist', false)
            let status
            switch (switchNumber) {
                case 0:
                    status = ''
                    break
                case 1:
                    status = 0
                    break
                case 2:
                    status = 10
                    break
            }
            this.$set(this.params, 'status', status)
            this.$set(this.params, 'curPageNO', 1)
            pageUtil.loadListByPage(this, this.params, {
                success: () => {
                    this.partLoading = false
                }
            })
        },

        // 加载更多
        onLoad() {
            pageUtil.loadListByPageMore()
        },

        // 选址时间范围
        selectTime() {
            this.showCalendar = true
        },

        // 确定时间
        onConfirm(date) {
            this.partLoading = true
            this.$set(this.paging, 'emptylist', false)
            let [startTime, endTime] = date
            startTime = this.$dateformat(startTime, 'YYYY-MM-DD')
            endTime = this.$dateformat(endTime, 'YYYY-MM-DD')
            this.$set(this.params, 'startDate', startTime)
            this.$set(this.params, 'endDate', endTime)
            pageUtil.loadListByPage(this, this.params, {
                success: () => {
                    this.partLoading = false
                    this.showCalendar = false
                }
            })
        },

        // 清除时间
        clearTime() {
            this.$set(this.params, 'startDate', '')
            this.$set(this.params, 'endDate', '')
            this.partLoading = true
            this.$set(this.paging, 'emptylist', false)
            pageUtil.loadListByPage(this, this.params, {
                success: () => {
                    this.partLoading = false
                    this.showCalendar = false
                }
            })
        }
    }
}
</script>
